<template>
  <div class="goods_rec">
    <van-sticky z-index="9999">
      <div class="nav">
        <h1>好价推荐</h1>
      </div>
    </van-sticky>
    <main>
      <van-search v-model="value" placeholder="手机" @focus="sear" />
      <!-- <div class="separate"></div> -->
      <div v-if="isLoading" class="loading">
        <van-skeleton v-for="v in 10" :key="'key' + v" title :row="4" />
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="goods">
            <ul>
              <router-link to="/good_desc">
                <Good :goodsList="goodsList"></Good>
              </router-link>
            </ul>
          </div>
        </van-list>
      </van-pull-refresh>
    </main>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  Skeleton,
  Search,
  List,
  PullRefresh,
  Sticky,
} from "vant";
import Good from "./good.vue";
import axios from "axios";

Vue.use(List);
Vue.use(Skeleton);
Vue.use(Search);
Vue.use(PullRefresh);
Vue.use(Sticky);

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {
    Good,
  },
  data() {
    return {
      value: "",

      isLoading: true,
      goodsList: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    async loadGoods() {
      let { f, wxapp, offset, limit } = this;
      let ret = await axios.get("/home/articles_new", {
        params: {
          f,
          wxapp,
          offset,
          limit,
        },
      });
      let source = ret.data.data.rows;
      // console.log(source);
      this.goodsList = [...this.goodsList, ...source];
    },

    async onLoad() {
      if (this.refreshing) {
        this.goodsList = [];
        this.offset = 0;
        this.refreshing = false;
      } else {
        this.offset += this.limit;
      }
      await this.loadGoods();
      this.loading = false;
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    sear() {
      this.$router.push({
        path: "/search",
      });
    },
  },

  created() {
    this.f = "wxapp";
    this.wxapp = "zdmapp";
    this.offset = 0;
    this.limit = 10;
  },
  async mounted() {
    await this.loadGoods();
    // 显示数据，控制骨架屏
    this.isLoading = false;
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/border.styl'
@import '../../assets/ellipsis.styl'
.goods_rec
  height calc(100% - 0.5rem)
  width 100%
  display flex
  flex-direction column
  position absolute
  top 0
  overflow hidden
  background-color #f8f8f8
main
  flex 1
  overflow-y scroll
.nav
  position sticky
  top 0
  height 0.45rem
  text-align center
  line-height 0.45rem
  background-color white
  h1
    font-size 0.16rem
    font-weight 400
</style>